const wxHttpHandler = require('../../utils/wxHttpHandler.js');
const api = require('../../APIConfig/apiConfig.js');
import * as echarts from '../../ec-canvas/echarts';
var app = getApp();

Page({
  data: {
    coldBoxId: '',
    waybillNumber: '',
    startTime: '',
    endTime: '',
    ec: {
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    },
    details: null,
    timeList: [], //时间轴
    humidityList: [], //湿度
    tempList: [], //温度
    locations: [], //位置
    markers: [], //当前显示的marker
    myChart: null,
    latitude: -1,
    longitude: -1,
  },

  onLoad: function (options) {
    let that = this
    this.setData({
      coldBoxId: '49', // options.coldBoxId,
      waybillNumber: '062469f845a94da2a3976fae989e16d5', //options.waybillNumber,
      startTime: '2020-09-11 17:31', // options.startTime,
      endTime: '2020-09-11 17:44', //options.endTime
    })
    this.echartsComponnet = this.selectComponent('#mychart-dom-line');
    this.init_echarts()
    this.getColdBoxTemperatureHistoryMonitorInfo()
    // wx.getLocation({
    //   type: 'gcj02',
    //   success(res) {
    //     that.setData({
    //       latitude: res.latitude,
    //       longitude: res.longitude
    //     })
    //   }
    // })
  },

  onShow: function () {},

  //运输监控-冷箱历史温控详情
  getColdBoxTemperatureHistoryMonitorInfo: function () {
    let data = {
      coldBoxId: this.data.coldBoxId,
      waybillNumber: this.data.waybillNumber,
      startTime: this.data.startTime,
      endTime: this.data.endTime
    }
    const that = this
    wxHttpHandler({
      type: 'get',
      path: api.getColdBoxTemperatureHistoryMonitorInfo,
      data: data,
      fn: function (res) {
        if (res.code == 0) {
          if (res.data != null) {
            that.setData({
              details: res.data
            })
            let marksTem = []
            that.data.details.curve.forEach(element => {
              that.data.timeList.push(element.rawtime.substring(11, 19))
              that.data.humidityList.push(element.humidity)
              that.data.tempList.push(element.temp)
              marksTem.push({
                latitude: element.latitude,
                longitude: element.longitude,
                iconPath: "../../assets/images/home/car.png",
                width: 20,
                height: 10,
                anchorX: 0,
                anchorY: 0
              })
            });

            let marker = []
            marker.push(
              marksTem[0]
            )
            that.setData({
              latitude: marksTem[0].latitude,
              longitude: marksTem[0].longitude,
              markers: marker,
              locations: marksTem
            })


            that.init_echarts()
          }
          wx.hideLoading()
        } else {
          wx.hideLoading()
          wx.showToast({
            title: res.desc,
            icon: 'none',
            duration: 1500,
            mask: true
          });
        }
      }

    })
  },

  //初始化图表
  init_echarts: function () {
    let that = this
    this.echartsComponnet.init((canvas, width, height, dpr) => {
      // 初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
      });
      chart.setOption(this.getOption());
      chart.on('click', 'series', function (params) {
        let marker = []
        marker.push(
          that.data.locations[params.dataIndex]
        )

        that.setData({
          latitude: that.data.locations[params.dataIndex].latitude,
          longitude: that.data.locations[params.dataIndex].longitude,
          markers: marker
        })
      })
      chart.on('mousemove', 'series', function (params) {
        let marker = []
        marker.push(
          that.data.locations[params.dataIndex]
        )
        that.setData({
          latitude: that.data.locations[params.dataIndex].latitude,
          longitude: that.data.locations[params.dataIndex].longitude,
          markers: marker
        })
      })

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
      s
    });
  },

  // 获取数据
  getOption: function () {
    var that = this
    var option = {
      title: {
        text: '',
        left: ''
      },
      color: ["#41CBA6", "#FFB540"],
      legend: {
        data: ['湿度', '温度'],
        top: 10,
        icon: 'rect',
        textStyle: {
          fontSize: 12,
          color: "#666"
        },
        left: 'center',
        z: 100
      },
      grid: {
        // containLabel: true
        x: 35,
        x2: 5,
        y: 40,
        y2: 40
      },
      tooltip: {
        show: true,
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: "#AAAAAA"
          }
        },
        axisLabel: {
          interval: 2,
          rotate: 40
        },
        axisTick: {
          lineStyle: {
            type: 'dashed',
            color: "#DDDDDD",
            width: 2
          }
        },
        boundaryGap: false,
        data: that.data.timeList,
        // show: false
      },
      yAxis: {
        x: 'center',
        type: 'value',
        axisLine: {
          lineStyle: {
            color: "#AAAAAA"
          }
        },
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
        // show: false
      },
      series: [{
        name: '温度',
        type: 'line',
        smooth: true,
        data: that.data.tempList,
        areaStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: "#41CBA6" // 0% 处的颜色
              }, {
                offset: 1,
                color: "#ffffff" // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          }
        }
      }, {
        name: '湿度',
        type: 'line',
        smooth: true,
        data: that.data.humidityList,
        areaStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: "#FFB540" // 0% 处的颜色
              }, {
                offset: 1,
                color: "#ffffff" // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          }
        }
      }]
    }
    return option
  },

})